<template>
	
	<!-- #ifdef MP-TOUTIAO -->
	<view class="navTop">
		<view :style="'height:' + statusBarHeight + 'px'"></view>
		<view v-if="!needShowDes" class="navTitle" style="color: white;">
			<!-- <image class="isBackBg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_isBackIndex.png"></image> -->
			<!-- <view @click.stop="isBack" class="backBox"></view>
			<view @click.stop="toIndex" class="indexBox"></view> -->
			<view  @click.stop="isBack" v-if="sequence != -1" style="color: white;font-weight: bold;font-size: 32rpx;">{{ hasInit && sequence != -1 ? '小剧场' : '小剧场' }}</view>
		</view>
		<view v-if="needShowDes" class="navTitleBatch" style="color: white;width: 100vw;">
			<view @click.stop="isBack" class="toIndexDes">回到首页</view>
			<view v-if="sequence != -1" style="color: white;font-weight: bold;font-size: 32rpx;">{{ hasInit && sequence != -1 ? sequenceDes : '' }}</view>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifdef MP-KUAISHOU -->
		<cover-view class="navTop">
			<cover-view :style="'height:' + statusBarHeight + 'px'"></cover-view>
			<cover-view class="navTitle" style="color: white;">
				<cover-image class="isBackBg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_isBackIndex.png"></cover-image>
				<cover-view @click.stop="isBack" class="backBox"></cover-view>
				<cover-view @click.stop="toIndex" class="indexBox"></cover-view>
				<cover-view v-if="sequence != -1" style="color: white;font-weight: bold;font-size: 32rpx;">{{ hasInit && sequence != -1 ? sequenceDes : '' }}</cover-view>
			</cover-view>
		</cover-view>
	<!-- #endif -->
</template>

<script>
	export default {
		name:"videoNavTop",
		props:{
			hasInit:{
				type:Boolean,
				default:false
			},
			sequence:{
				type:Number,
				default:-1
			}
		},
		computed:{
			sequenceDes(){
				return this.sequence == -1 ? '' : `第 ${this.sequence + 1} 集`
			}
		},
		data() {
			return {
				needShowDes:false,
				statusBarHeight: uni.getSystemInfoSync()['statusBarHeight'],
			};
		},
		mounted() {
			let pages = getCurrentPages(); //获取加载的页面
			console.log('isBack', pages);
			if (pages.length <= 1) {
				this.needShowDes = true;
				return;
			}
				
		},
		methods:{
			toIndex(){
				this.$uma && this.$uma.trackEvent('Ume_page2_control', {
					name: 'Ume_page2_control_p1_up'
				});
				this.$emit('topBack');
				return;
				uni.switchTab({
					url: '/pages/fx_xjc/fx_xjc'
				});
			},
			isBack() {
				this.$uma && this.$uma.trackEvent('Ume_page2_control', {
					name: 'Ume_page2_control_f1'
				});
				getApp().globalData.videoShow = false;
				
				this.$emit('topBack');
				return;
				
				let pages = getCurrentPages(); //获取加载的页面
				console.log('isBack', pages);
				if (pages.length <= 1) {
					uni.switchTab({
						url: '/pages/fx_xjc/fx_xjc'
					});
					return;
				}
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.toIndexDes{
		position: absolute;
		top: 0;
		bottom: 0;
		left:100rpx;
		font-weight: normal;
		font-size: 28rpx;
	}
	.navTitleBatch{
		position: relative;
		display: flex;
		align-items: center;
		color: #000;
		z-index: 98;
		font-size: 36rpx;
		font-weight: bold;
		width: 100vw;
		line-height: 104rpx;
		height: 104rpx;
		font-size: 34rpx;
		justify-content: center;
	}
	.isBackBg{
		position: absolute;
		z-index: 1;
		left: 30rpx;
		width: 74px;
		height: 32px;
	}
	.indexBox{
		position: absolute;
		left: 100rpx;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.backBox {
		position: absolute;
		left: 0;
		top: 0;
		height: 94rpx;
		line-height: 94rpx;
		text-align: left;
	}
	.backBox{
		width: 100rpx;
	}
	.indexBox{
		width: 120rpx;
	}
	.backBox,.indexBox{
		height: 120rpx;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
	}
.navBox {
	position: relative;
}
.icon-index{
	position: absolute;
	left: 93rpx;
	top: 0;
	width: 38rpx;
	height: 38rpx;
	bottom: 0;
	margin: auto;
}
.icon-back {
	position: absolute;
	left: 30rpx;
	top: 0;
	width: 18rpx;
	height: 32rpx;
	bottom: 0;
	margin: auto;
}
.navTitle {
	position: relative;
	display: flex;
	align-items: center;
	color: #000;
	z-index: 98;
	font-size: 36rpx;
	font-weight: bold;
	// #ifdef MP-TOUTIAO
	margin-left: 100rpx;
	width: 52vw;
	line-height: 104rpx;
	height: 104rpx;
	font-size: 34rpx;
	// #endif
	// #ifdef MP-KUAISHOU
	justify-content: center;
	width: 100vw;
	height: 92rpx;
	// #endif
	
}
.isBackBg{
	
}
.navTop {
	// background-color: #000000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 996;
	width: 100vw;
}
</style>
